<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF排行数据管理</title>
    <link rel="stylesheet" href="/css/antd.min.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #fff;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .header-title {
            margin: 0 0 20px 0;
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }
        .search-form {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: flex-end;
        }
        .form-item {
            margin-bottom: 0;
        }
        .button-group {
            display: flex;
            gap: 12px;
        }
        .table-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .table-title {
            margin: 0 0 16px 0;
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
        .growth-positive {
            color: #ff4d4f;
        }
        .growth-negative {
            color: #52c41a;
        }
        .empty-state {
            text-align: center;
            padding: 60px 0;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="header-title">ETF排行数据管理</h1>
        <div class="search-form">
            <div class="form-item">
                <label>日期：</label>
                <input type="date" id="dateInput" th:value="${defaultDate}" style="padding: 6px; width: 160px;">
            </div>
            <div class="form-item">
                <label>排序字段：</label>
                <select id="orderByField" style="padding: 6px; width: 160px;">
                    <option value="daily_growth_rate">日涨跌幅</option>
                    <option value="weekly_growth_rate" selected>周涨跌幅</option>
                    <option value="monthly_growth_rate">月涨跌幅</option>
                    <option value="three_month_growth_rate">三个月涨跌幅</option>
                    <option value="six_month_growth_rate">六个月涨跌幅</option>
                    <option value="year_growth_rate">年涨跌幅</option>
                </select>
            </div>
            <div class="form-item">
                <label>排序方向：</label>
                <select id="orderByDirection" style="padding: 6px; width: 100px;">
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>
            </div>
            <div class="form-item">
                <label>限制数量：</label>
                <select id="limit" style="padding: 6px; width: 100px;">
                    <option value="20">20</option>
                    <option value="50" selected>50</option>
                    <option value="100">100</option>
                </select>
            </div>
            <div class="button-group">
                <button id="searchBtn" style="padding: 6px 16px; background-color: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer;">查询</button>
                <button id="fetchDataBtn" style="padding: 6px 16px; background-color: #52c41a; color: white; border: none; border-radius: 4px; cursor: pointer;">手动抓取数据</button>
                <button id="refreshBtn" style="padding: 6px 16px; background-color: #faad14; color: white; border: none; border-radius: 4px; cursor: pointer;">刷新</button>
            </div>
        </div>
    </div>

    <div class="table-container">
        <h2 class="table-title">ETF排行数据列表</h2>
        <div id="tableWrapper" style="overflow-x: auto;">
            <table id="dataTable" style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background-color: #fafafa; border-bottom: 2px solid #e8e8e8;">
                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;">序号</th>
                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;">基金代码</th>
                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;">基金名称</th>
                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;">基金类型</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">最新净值</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">日涨跌幅</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">周涨跌幅</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">月涨跌幅</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">三个月涨跌幅</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">六个月涨跌幅</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">年涨跌幅</th>
                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;">净值日期</th>
                        <th style="padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8;">操作</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        <div id="emptyState" class="empty-state" style="display: none;">
            <p>暂无数据</p>
        </div>
        <div class="pagination">
            <span id="totalCount" style="margin-right: 16px;">共 0 条数据</span>
        </div>
    </div>

    <div id="detailModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
        <div style="background-color: white; border-radius: 6px; padding: 24px; width: 80%; max-width: 600px; max-height: 80%; overflow-y: auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="margin: 0;">ETF排行详情</h3>
                <button id="closeModal" style="background: none; border: none; font-size: 20px; cursor: pointer;">×</button>
            </div>
            <div id="detailContent">
                <!-- 详情内容将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/antd.min.js"></script>
    <script>
        $(function() {
            // 初始化页面
            loadData();
            
            // 查询按钮事件
            $('#searchBtn').click(function() {
                loadData();
            });
            
            // 刷新按钮事件
            $('#refreshBtn').click(function() {
                loadData();
            });
            
            // 手动抓取数据按钮事件
            $('#fetchDataBtn').click(function() {
                if (confirm('确定要手动抓取最新ETF排行数据吗？')) {
                    fetchData();
                }
            });
            
            // 关闭模态框
            $('#closeModal').click(function() {
                $('#detailModal').css('display', 'none');
            });
            
            // 点击模态框外部关闭
            $('#detailModal').click(function(e) {
                if (e.target === this) {
                    $('#detailModal').css('display', 'none');
                }
            });
        });
        
        // 加载数据
        function loadData() {
            const date = $('#dateInput').val();
            const orderByField = $('#orderByField').val();
            const orderByDirection = $('#orderByDirection').val();
            const limit = $('#limit').val();
            
            $('#tableBody').html('<tr><td colspan="13" style="text-align: center; padding: 40px;">加载中...</td></tr>');
            $('#emptyState').hide();
            
            $.ajax({
                url: '/etfrank/dataList',
                type: 'GET',
                data: {
                    date: date,
                    orderByField: orderByField,
                    orderByDirection: orderByDirection,
                    limit: limit
                },
                success: function(response) {
                    if (response.success) {
                        const data = response.data;
                        renderTable(data);
                        $('#totalCount').text('共 ' + data.length + ' 条数据');
                        
                        if (data.length === 0) {
                            $('#emptyState').show();
                        }
                    } else {
                        alert('获取数据失败：' + response.message);
                        $('#tableBody').html('');
                        $('#emptyState').show();
                    }
                },
                error: function() {
                    alert('请求失败，请稍后重试');
                    $('#tableBody').html('');
                    $('#emptyState').show();
                }
            });
        }
        
        // 渲染表格
        function renderTable(data) {
            let html = '';
            
            if (data && data.length > 0) {
                data.forEach(function(item, index) {
                    html += `<tr>
                        <td style="padding: 12px; border-bottom: 1px solid #e8e8e8;">${index + 1}</td>
                        <td style="padding: 12px; border-bottom: 1px solid #e8e8e8;">${item.fundCode}</td>
                        <td style="padding: 12px; border-bottom: 1px solid #e8e8e8;">${item.fundName}</td>
                        <td style="padding: 12px; border-bottom: 1px solid #e8e8e8;">${item.fundType || '-'}</td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">${formatNumber(item.nav, 4)}</td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">
                            <span class="${item.dailyGrowthRate && item.dailyGrowthRate > 0 ? 'growth-positive' : (item.dailyGrowthRate && item.dailyGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(item.dailyGrowthRate)}
                            </span>
                        </td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">
                            <span class="${item.weeklyGrowthRate && item.weeklyGrowthRate > 0 ? 'growth-positive' : (item.weeklyGrowthRate && item.weeklyGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(item.weeklyGrowthRate)}
                            </span>
                        </td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">
                            <span class="${item.monthlyGrowthRate && item.monthlyGrowthRate > 0 ? 'growth-positive' : (item.monthlyGrowthRate && item.monthlyGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(item.monthlyGrowthRate)}
                            </span>
                        </td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">
                            <span class="${item.threeMonthGrowthRate && item.threeMonthGrowthRate > 0 ? 'growth-positive' : (item.threeMonthGrowthRate && item.threeMonthGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(item.threeMonthGrowthRate)}
                            </span>
                        </td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">
                            <span class="${item.sixMonthGrowthRate && item.sixMonthGrowthRate > 0 ? 'growth-positive' : (item.sixMonthGrowthRate && item.sixMonthGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(item.sixMonthGrowthRate)}
                            </span>
                        </td>
                        <td style="padding: 12px; text-align: right; border-bottom: 1px solid #e8e8e8;">
                            <span class="${item.yearGrowthRate && item.yearGrowthRate > 0 ? 'growth-positive' : (item.yearGrowthRate && item.yearGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(item.yearGrowthRate)}
                            </span>
                        </td>
                        <td style="padding: 12px; border-bottom: 1px solid #e8e8e8;">${formatDate(item.navDate)}</td>
                        <td style="padding: 12px; border-bottom: 1px solid #e8e8e8;">
                            <button onclick="viewDetail('${item.fundCode}', '${formatDate(item.navDate)}')" 
                                    style="padding: 4px 12px; background-color: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer;">
                                查看详情
                            </button>
                        </td>
                    </tr>`;
                });
            }
            
            $('#tableBody').html(html);
        }
        
        // 查看详情
        function viewDetail(fundCode, date) {
            $.ajax({
                url: '/etfrank/detail',
                type: 'GET',
                data: {
                    fundCode: fundCode,
                    date: date
                },
                success: function(response) {
                    if (response.success) {
                        const data = response.data;
                        renderDetail(data);
                        $('#detailModal').css('display', 'flex');
                    } else {
                        alert('获取详情失败：' + response.message);
                    }
                },
                error: function() {
                    alert('请求失败，请稍后重试');
                }
            });
        }
        
        // 渲染详情
        function renderDetail(data) {
            let html = `
                <table style="width: 100%; border-collapse: collapse;">
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500; width: 30%;">基金代码</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${data.fundCode}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">基金名称</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${data.fundName}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">基金类型</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${data.fundType || '-'}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">最新净值</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${formatNumber(data.nav, 4)}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">日涨跌幅</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">
                            <span class="${data.dailyGrowthRate && data.dailyGrowthRate > 0 ? 'growth-positive' : (data.dailyGrowthRate && data.dailyGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(data.dailyGrowthRate)}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">周涨跌幅</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">
                            <span class="${data.weeklyGrowthRate && data.weeklyGrowthRate > 0 ? 'growth-positive' : (data.weeklyGrowthRate && data.weeklyGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(data.weeklyGrowthRate)}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">月涨跌幅</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">
                            <span class="${data.monthlyGrowthRate && data.monthlyGrowthRate > 0 ? 'growth-positive' : (data.monthlyGrowthRate && data.monthlyGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(data.monthlyGrowthRate)}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">三个月涨跌幅</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">
                            <span class="${data.threeMonthGrowthRate && data.threeMonthGrowthRate > 0 ? 'growth-positive' : (data.threeMonthGrowthRate && data.threeMonthGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(data.threeMonthGrowthRate)}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">六个月涨跌幅</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">
                            <span class="${data.sixMonthGrowthRate && data.sixMonthGrowthRate > 0 ? 'growth-positive' : (data.sixMonthGrowthRate && data.sixMonthGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(data.sixMonthGrowthRate)}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">年涨跌幅</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">
                            <span class="${data.yearGrowthRate && data.yearGrowthRate > 0 ? 'growth-positive' : (data.yearGrowthRate && data.yearGrowthRate < 0 ? 'growth-negative' : '')}">
                                ${formatPercent(data.yearGrowthRate)}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">净值日期</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${formatDate(data.navDate)}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">成交额</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${formatNumber(data.turnover, 0)}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">成交量</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${formatNumber(data.volume, 0)}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">市值</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${formatNumber(data.marketCap, 0)}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8; font-weight: 500;">基金规模</td>
                        <td style="padding: 8px; border-bottom: 1px solid #e8e8e8;">${formatNumber(data.fundSize, 2)}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; font-weight: 500;">成立日期</td>
                        <td style="padding: 8px;">${data.establishDate ? formatDate(data.establishDate) : '-'}</td>
                    </tr>
                </table>
            `;
            
            $('#detailContent').html(html);
        }
        
        // 手动抓取数据
        function fetchData() {
            $('#fetchDataBtn').attr('disabled', true);
            $('#fetchDataBtn').text('抓取中...');
            
            $.ajax({
                url: '/etfrank/fetchData',
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        loadData();
                    } else {
                        alert('抓取失败：' + response.message);
                    }
                },
                error: function() {
                    alert('请求失败，请稍后重试');
                },
                complete: function() {
                    $('#fetchDataBtn').attr('disabled', false);
                    $('#fetchDataBtn').text('手动抓取数据');
                }
            });
        }
        
        // 格式化数字
        function formatNumber(value, decimals) {
            if (value === null || value === undefined || value === '') {
                return '-';
            }
            return Number(value).toFixed(decimals);
        }
        
        // 格式化百分比
        function formatPercent(value) {
            if (value === null || value === undefined || value === '') {
                return '-';
            }
            return (Number(value) * 100).toFixed(2) + '%';
        }
        
        // 格式化日期
        function formatDate(dateStr) {
            if (!dateStr) {
                return '-';
            }
            const date = new Date(dateStr);
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            }).replace(/\//g, '-');
        }
    </script>
</body>
</html>